<template>
  <el-row class="tac menu">
    <el-col>
      <el-menu>
        <router-link to="/home">
          <el-menu-item index="0">
            <i class="iconfont icon-shouye1"></i>
            <span>首页</span>
          </el-menu-item>
        </router-link>

        <template v-for="item in items">
          <el-sub-menu v-if="item.children" :index="item.path" :key="item.path">
            <template #title>
              <i :class="`iconfont  ${item.icon}`"></i>
              <span slot="title">{{ item.name }}</span>
            </template>
            <router-link
              v-for="(citem, cindex) in item.children"
              :to="citem.path"
              :key="cindex"
            >
              <el-menu-item :index="citem.path">
                <span slot="title">{{ citem.name }}</span>
              </el-menu-item>
            </router-link>
          </el-sub-menu>
        </template>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script setup>
import { reactive } from "vue";
const items = reactive([
  {
    icon: "icon-jichuxinxiguanli",
    name: "人员管理",
    path: "list",
    children: [
      {
        path: "nursinglist",
        name: "护理人员管理"
      },
      {
        path: "greybeardlist",
        name: "养老人员管理",
      },
    ],
  },
  {
    icon: "icon-jichuxinxiguanli",
    name: "住宿管理",
    path: "accommodationlist",
    children: [
      {
        path: "accommodationlist",
        name: "住宿信息",
      },
    ],
  },
  {
    icon: "icon-jichuxinxiguanli",
    name: "项目管理",
    path: "projectlist",
    children: [
      {
        path: "projectlist",
        name: "护理项目列表",
      },
    ],
  },
  {
    icon: "icon-jichuxinxiguanli",
    name: "方案管理",
    path: "schemelist",
    children: [
      {
        path: "schemelist",
        name: "护理方案列表",
      },
    ],
  },
  {
    icon: "icon-jichuxinxiguanli",
    name: "信息管理",
    path: "info",
    children: [
      {
        path: "infoshow",
        name: "个人信息",
      },
    ],
  },
  {
    icon: "icon-jichuxinxiguanli",
    name: "页面丢失测试",
    path: "info1",
    children: [
      {
        path: "infoshow1",
        name: "测试",
      },
    ],
  },
]);
</script>

<style lang="less" scoped>
.menu {
  border: none;
  width: 200px;
  height: 100%;
  position: fixed;
  .el-menu {
    height: 100%;
  }
}
</style>
